<html>
  <head>
    <script src="card.js"></script>
    <script src="img_library.js"></script>
    <link rel="stylesheet" type="text/css" href="card.css">
  </head>
  <body>
    <nav id='main_menu'> 
      <ul>
        <li><div>Card Library</div></li>
        <li><a href="img.html">Image Library</a></li>
        <li><a href="deck.html">Deck</a></li>
        <li><a href="grid.html">Grid</a></li>
        <li><a href="slide.html">Slide</a></li>
      </ul>
    </nav>
    <div style="clear: both;">
    <form>
      <div class="block">
        <label for="level">level</label>
        <input type="number" id="level" min="0" max="12" maxlength="2" size="2" value="4" readonly>
      </div>
      <div class="block">
        <label for="index">index</label>
        <input type="number" id="index" min="0" max="12" maxlength="2" size="2" value="0">
        <input type="button" value="<" onClick="CardEdit.dec(document.getElementById('index'));CardEdit.redraw()" />
        <input type="button" value=">" onClick="CardEdit.inc(document.getElementById('index'));CardEdit.redraw()" />
      </div>
      <div class="block">
        <label for="imgIndex">imgIndex</label>
        <input type="number" id="imgIndex" min="0" max="12" maxlength="2" size="2" value="0">
        <input type="button" value="<" onClick="CardEdit.dec(document.getElementById('imgIndex'));CardEdit.saveCard()" />
        <input type="button" value=">" onClick="CardEdit.inc(document.getElementById('imgIndex'));CardEdit.saveCard()" />
      </div>
      <div class="block">
        <label for="health">health</label>
        <input type="number" id="health" min="1" max="5" maxlength="2" size="2" value="1"">
        <input type="button" value="<" onClick="CardEdit.dec(document.getElementById('health'));CardEdit.saveCard()" />
        <input type="button" value=">" onClick="CardEdit.inc(document.getElementById('health'));CardEdit.saveCard()" />
      </div>
      <div class="block">
        <label for="attack">attack</label>
        <input type="number" id="attack" min="1" max="5" maxlength="2" size="2" value="1"">
        <input type="button" value="<" onClick="CardEdit.dec(document.getElementById('attack'));CardEdit.saveCard()" />
        <input type="button" value=">" onClick="CardEdit.inc(document.getElementById('attack'));CardEdit.saveCard()" />
      </div>
      <div class="block">
        <label for="type">type</label>
        <input type="number" id="type" min="1" max="5" maxlength="2" size="2" value="1">
        <input type="button" value="<" onClick="CardEdit.dec(document.getElementById('type'));CardEdit.saveCard()" />
        <input type="button" value=">" onClick="CardEdit.inc(document.getElementById('type'));CardEdit.saveCard()" />
      </div>
      <div class="block">
        <label for="trigger">trigger</label>
        <select id="trigger">
          <option value="none">none</option>
          <option value="death">death</option>
          <option value="enter">enter</option>
          <option value="turn">turn</option>
        </select>
      </div>
      <div class="block">
        <label for="target">target</label>
        <select id="target">
          <option value="self">self</option>
          <option value="other">other</option>
          <option value="friendly">friendly</option>
          <option value="foe">foe</option>
        </select>
      </div>
      <div class="block">
        <label for="action">action</label>
        <select id="action">
          <option value="heal">heal</option>
          <option value="attack">attack</option>
        </select>
      </div>
      <div class="block">
        <label for="name">name</label>
        <input type="text" id="name" value="untitled" maxlength="12" size="12" onChange="CardEdit.saveCard()">
      </div>
    </form>
    
    <div class="block">
      <canvas id="cardLibrary" width="320" height="400"></canvas>
    </div>
    
    <div class="block">
      Todo:
      <ul>
        <li>Make card attribute bigger and more colorful depending on number</li>
        <li>Add points according to level</li>
        <li>Implement raster to vector image converter</li>
        <li>Move the card up when editing its values</li>
        <li>Add special talent on cards</li>
      </ul>
    </div>
    <script>
      var CardEdit = new function () 
      {
        function getElemOffset( element )
        {
          var offsetX = 0, offsetY = 0;
          // Compute the total offset
          if (element.offsetParent !== undefined) {
            do {
              offsetX += element.offsetLeft;
              offsetY += element.offsetTop;
            } while ((element = element.offsetParent));
          }
          return { x: offsetX, y: offsetY };
        }
        var currentLoadIndex = 0;
        var timeoutTime = 100;
        var cards = [];
        var numCards = 12;
        this.inc = function(elem)
        {
          var value = parseInt(elem.value);
          if (value < elem.max)
          {
            elem.value = value+1;
          }
          else
          {
            elem.value = elem.max;
          }
        }
        this.dec = function(elem)
        {
          var value = parseInt(elem.value);
          if (value > elem.min)
          {
            elem.value = value-1;
          }
          else
          {
            elem.value = elem.min;
          }
        }
        
        this.clickImage = function(p)
        {
          var canvas = document.getElementById('cardLibrary');
         
          var x = Math.max(0,Math.min(4, Math.floor((p.x/canvas.width)*4)));
          var y = Math.max(0,Math.min(3, Math.floor((p.y/canvas.height)*3)));
          var index = x+y*4;
          document.getElementById('index').value = index;
          if (cards[index])
          { 
            document.getElementById('imgIndex').value = cards[index].imgIndex;
            document.getElementById('health').value = cards[index].health;
            document.getElementById('attack').value = cards[index].attack;
            document.getElementById('type').value = cards[index].type;
            document.getElementById('name').value = cards[index].name;
          }
          CardEdit.redraw();
        }
        this.init = function()
        {
          var canvas = document.getElementById('cardLibrary');
          
          var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));
          if (!isTouch)
          {
            canvas.addEventListener('mousedown', function(event)
            {
              if (event.which == 1)
              {
                var offset = getElemOffset(canvas);
                var p = { 
                  x : event.pageX - offset.x,
                  y : event.pageY - offset.y
                };
                CardEdit.clickImage(p);
              }
            });
          }
          else
          {
            canvas.addEventListener('touchstart',  function(event)
            {
              if (event.targetTouches.length == 1) 
              {
                var offset = getElemOffset(canvas);
                var p = { 
                  x : event.targetTouches[0].pageX - offset.x,
                  y : event.targetTouches[0].pageY - offset.y
                };
                CardEdit.clickImage(p);
              }
            });
          }
        }
        this.saveCard = function()
        {
          var currentSelectedCard = parseInt(document.getElementById('index').value);
          if (cards[currentSelectedCard])
          {
            var imgIndex = parseInt(document.getElementById('imgIndex').value);
            var health = parseInt(document.getElementById('health').value);
            var attack = parseInt(document.getElementById('attack').value);
            var type = parseInt(document.getElementById('type').value);
            var name = document.getElementById('name').value;
            var cardData = 
            {
              imgIndex:imgIndex,
              health:health,
              attack:attack,
              type:type,
              name:name,
              p:{x:currentSelectedCard*(Card.Width+Card.Padding)+Card.Width/2+Card.Padding,y:Card.Height/2+Card.Padding}
            }
            cards[currentSelectedCard] = cardData;
            Card.save(currentSelectedCard,cardData);
            CardEdit.redraw();
            
          }
        }
        this.loadCards = function()
        {
          var card = Card.load(currentLoadIndex);
          document.getElementById('index').value = currentLoadIndex;
          if (card)
          {
            cards[currentLoadIndex] = card;
            CardEdit.redraw();
          }
          else
          {
            cards[currentLoadIndex] =
            {
              imgIndex:0,
              health:1,
              attack:1,
              type:0,
              name:"untitled",
              p:{x:0,y:0}
            };
            CardEdit.saveCard();
          }
          currentLoadIndex = currentLoadIndex+1;
          if (currentLoadIndex < numCards)
          {
            setTimeout(CardEdit.loadCards, timeoutTime); 
          }
          else
          {
            currentLoadIndex = 0;
          }
        }
        this.load = function()
        {
          ImageLibrary.load(currentLoadIndex);
          currentLoadIndex = currentLoadIndex+1;
          if (currentLoadIndex <= 5)
          {
            setTimeout(CardEdit.load, timeoutTime); 
          }
          else
          {
            Card.Images = ImageLibrary.Images;
            currentLoadIndex = 0;
            CardEdit.redraw();
            setTimeout(CardEdit.loadCards, timeoutTime); 
          }
        }
        this.redraw = function()
        {
          var canvas = document.getElementById('cardLibrary');
          var currentSelectedCard = parseInt(document.getElementById('index').value);
          for (var i=0; i<numCards; i++)
          {
            if (cards[i])
            {
              var x = (i%4)*(Card.Width+Card.Padding*4) + (Card.Width+Card.Padding*4)/2;
              var y = Math.floor(i/4)*(Card.Height+Card.Padding*4) + (Card.Height+Card.Padding*4)/2;
              cards[i].p = {x:x,y:y};
              Card.newDrawCard(canvas, cards[i], i==currentSelectedCard);
            }
          }
        }
      }
      CardEdit.load();
      CardEdit.init();
    </script>
  </body>
</html>
